// 项目的根组件，一切组件的根基
// App被引入到了index.js,渲染到public/index.html文件中id为root的div


// 父传子
// 1. 父组件传递数据，子组件标签身上绑定属性
// 2. 子组件接收数据，props的参数 
function Son(props) {
  // props：对象里面包含了父组件传递过来的所有数据
  // {name: '父组件中的数据'}
  console.log(props)
  return <div>this is son,  {props.name}, jsx:{props.child}， children：{props.children}</div>
}

function App13() {
  const name = 'this is app name'
  return (
    <div className="App">
      {/* 子组件标签上绑定属性，属性名称随便定义 */}
      <Son 
        name = {name}
        age = {18}
        isTrue = {false}
        list = {['vue', 'react']}
        obj = {{name: 'jack'}}
        cb = {() => console.log('test')}
        child = {<span>this is span</span>}
      >
        {/* 组件套组件会默认传递一个children字段 */}
        <span>this is children span</span>
      </Son>
    </div>
  )
}

export default App13
